<template>

  <div class="app-container home">
    <el-form :model="queryParams" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="接口名称">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入接口名称"
          clearable
          style="width: 240px"/>
      </el-form-item>

      <el-form-item label="接口用途">
        <el-input
          v-model="queryParams.explain"
          placeholder="请输入用途关键字"
          clearable
          style="width: 240px"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="reset()">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10">
      <el-col v-for="item in interList" :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log" style="margin-bottom: 10px">
          <div slot="header" class="clearfix">
            <h2>{{ item.name }}</h2>
          </div>
          <div class="body">
            <p style="height: 80px">
              {{ item.explain }} </p>
            <p>
              <b>调用价格：</b> <span>{{ item.unitPrice }} 元/次 {{ item.delFlag == '1' ? '(定制价)' : '' }}</span>
            </p>
            <p>
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-cloudy"
                plain
                @click="toInterInfo(item)">查看详情
              </el-button>
              <el-button
                size="mini"
                icon="el-icon-s-home"
                plain
                @click="goChongzhi">充值使用
              </el-button>
            </p>
          </div>
        </el-card>
        <p v-show="total==0">暂无此类接口</p>
      </el-col>
    </el-row>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :pageSizes="[6, 10, 30, 50]"
      @pagination="getList"
    />
  </div>
</template>

<script>

  import Cookies from "js-cookie";
  import {getUserInterInfo} from "@/api/jiekou/jiekou";

  export default {
    name: "Index",
    data() {
      return {
        username: "",
        showSearch: true,
        // 表格数据
        interList: null,
        // 总条数
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 9,
          name: '',
          explain: ''
        },
      };
    },

    created() {
      this.username = Cookies.get("username")
      this.getList();
    },

    methods: {
      goChongzhi() {
        this.$router.push({path: "account/accountCenter"}).catch(() => {
        });
      },

      getList() {
        getUserInterInfo(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
            this.interList = response.rows
            this.total = response.total
          }
        );
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      // 表单重置
      reset() {
        this.queryParams = {
          name: null,
          explain: null
        }
        this.getList()
      },

      toInterInfo(item) {
        this.$router.push({
          path: "/interCenter/interInfo", query: {
            'jfCode': item.jfCode,
            'name': item.name,
            'source': item.sourceTypeNum
          }
        })
      }
    }
  };

</script>

<style scoped lang="scss">
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }

    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }

    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
</style>


